const path = require('path')
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 打包生成的js文件自动加载index.html 文件中
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
    return [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              "postcss-preset-env", // 能解决大多数样式兼容性问题
            ],
          },
        },
      },
      preProcessor,
    ].filter(Boolean);
  };
module.exports = {
    // 入口
    entry: "./src/main.js",
    // 输出
    output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path: path.resolve(__dirname, "../dist"),
        // filename: 输出文件名
        filename: "static/js/main.js",

        clean: true, // 在打包前自动清空path目录
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/,// 用来匹配 .css 结尾的文件
                use: [ // use 数组里面 Loader 执行顺序是从右到左
                MiniCssExtractPlugin.loader, // 将js中css通过创建style标签的形式添加到html标签中
                    {
                        loader: 'css-loader',// 将css资源编译commonjs的模块到js中
                        // options: {
                        //     modules: true
                        // }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                          postcssOptions: {
                            plugins: [
                              "postcss-preset-env", // 能解决大多数样式兼容性问题
                            ],
                          },
                        },
                      },
                ]
            },
            {
                test: /\.less$/,// 用来匹配 .less 结尾的文件
                use: [ // use 数组里面 Loader 执行顺序是从右到左
                MiniCssExtractPlugin.loader, // 将js中css通过创建style标签的形式添加到html标签中
                    {
                        loader: 'css-loader',// 将css资源编译commonjs的模块到js中
                        // options: {
                        //     modules: true
                        // }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                          postcssOptions: {
                            plugins: [
                              "postcss-preset-env", // 能解决大多数样式兼容性问题
                            ],
                          },
                        },
                      },
                    {
                        loader: "less-loader" // compiles Less to CSS
                    },
                ]
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                },{
                    loader: "postcss-loader",
                    options: {
                      postcssOptions: {
                        plugins: [
                          "postcss-preset-env", // 能解决大多数样式兼容性问题
                        ],
                      },
                    },
                  }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                },]
            },
            {
                test: /\.styl$/,
                use: [MiniCssExtractPlugin.loader, "css-loader",{
                    loader: "postcss-loader",
                    options: {
                      postcssOptions: {
                        plugins: [
                          "postcss-preset-env", // 能解决大多数样式兼容性问题
                        ],
                      },
                    },
                  }, "stylus-loader",],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // webpack5内置模块 会转成base64
                parser: {
                    dataUrlCondition: {
                        maxSize: 60 * 1024 // // 小于60kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/imags/[hash:8][ext][query]",
                },
            },
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/, // 处理字体图标或媒体资源
                type: "asset/resource", // 资源模块，不需要转成base64
                generator: {
                    filename: "static/media/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },

        ],
    },
    // 插件
    plugins: [
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
        new MiniCssExtractPlugin(), // css压缩
    ],
    // 模式 开发模式：development 生产模式：production
    mode: "production",
};